// 1. 制作饼形图
function setPie(){
    let myChart = echarts.init(document.querySelector('.pie'))
    let option = {
        title: {
            text: '籍贯Hometown',
            textStyle: {
                color: '#6d767e' 
            }
        },
        // 提示框
        tooltip: {
        formatter: '{a} <br />{b} <strong>{c}</strong>人 占比{d}%'
  },
  series: [
    {
      name: '各地学员分布',
      type: 'pie',
      radius: ['10%','60%'],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 4
      },
      data: [
        { value: 40, name: '北京省'},
        { value: 38, name: '山东省'},
        { value: 32, name: '上海省'},
        { value: 30, name: '江苏省'},
        { value: 28, name: '河北省'},
        { value: 26, name: '山西省'},
        { value: 22, name: '河南省'},
        { value: 18, name: '辽宁省'}
      ]
    }
  ]
    }
myChart.setOption(option)
}
setPie()

// 2. 制作折线图
function setLine(){
  let myChart = echarts.init(document.querySelector('.line'));
    let option = {
       tooltip: {
    trigger: 'axis',
    position: function (pt) {
      return [pt[0], '10%'];
    }
  },
  title: {
    text: '薪资Salary',
    textStyle: {
      color: '#6d767e' 
    }
  },
  legend: {
    show: true
  },
  xAxis: {
    type: 'category',  // 类别
    boundaryGap: false,  // 两侧是否留白
    data: [
      '孔娟',
      '汤霞',
      '万敏',
      '姚军',
      '潘涛',
      '韩芳',
      '袁超',
      '江洋',
      '萤静',
      '陆娟',
      '贺涛',
      '彭静',
      '邓杰',
      '赵丽',
      '陈洋',
      '白静',
      '李四',
      '张飞',
      '赵云',
      '依依'
    ]
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '50%'] // y轴留白会影响最大值和最小值
      },
  //缩放组件
  dataZoom: [
    {
      // inside鼠标滚轮实现缩放，slider通过滑动条实现缩放(默认值)
      type: 'slider',
      start: 0, //起始位置
      end: 20 //结束位置
    },
  ],
  series: [
    {
      name: '期望资薪',
      type: 'line',
      smooth: true,  //转折点是否圆润
      symbol: 'none', // 折点的标记
      itemStyle: {
        color: '#ee6666'
      },
      data:[8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000]
    },
     {
      name: '实际薪资',
      type: 'line',
      smoolh: true,
      symbol: 'none',
      sampling: 'lttb',
      itemStyle: {
        color: '#5470c6'
      },
      data: [9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 13000]
    }
  ]
  }
  myChart.setOption(option)
}
setLine()

// 3. 制作柱形图
function setBar(obj) {
  let myChart = echarts.init(document.querySelector('.barChart'));
  let option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  grid: {
    top: 30,
    bottom: 30,
    left: '7%',
    right: '7%'
  }, // 网格（整个图表区域设置）
  title: {
    textStyle: {
      color: '#6d767e'
    }
  },
  legend: {},
  xAxis: [
    {
      type: 'category',
      data: obj.group,
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      min: 0,
      max: 100,
      interval: 10,
      axisLabel: {
        formatter: '{value} 分'
      }
    },
    {
      type: 'value',
      min: 0,
      max: 10,
      interval: 1,
      axisLabel: {
        formatter: '{value} 人'
      }
    }
  ],
  series: [
    {
      name: '平均分',
      type: 'bar',
      barWidth: 15,
      data: obj.avgScore
    },
    {
      name: '低于60分人数',
      type: 'bar',
      barWidth: 15,
      yAxisIndex: 1,
      data:obj.lt60
    },
    {
      name: '60到80分之间',
      type: 'bar',
      barWidth: 15,
      yAxisIndex: 1,
      data: obj.gt60
    },
    {
      name: '高于80分人数',
      type: 'bar',
      barWidth: 15,
      yAxisIndex: 1,
      data: obj.gt80
    }
  ]
}
	myChart.setOption(option)
}
// setBar()

// 4. 制作地图
function setMap() {
  let myChart = echarts.init(document.querySelector('.map'))
  // 位置 + 经纬度
 
  // 位置 + 经纬度
  var chinaGeoCoordMap = {
    "顺义校区": [
        116.4551,
        40.2539
    ],
    "海拉尔区": [
        119.736279,
        49.212189
    ],
    "市中区": [
        116.997777,
        36.651474
    ],
};
  var chinaDatas = [
    [
        {
            "name": "海拉尔区",
            "value": 0
        }
    ],
    [
        {
            "name": "市中区",
            "value": 0
        }
    ],
];

  var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var dataItem = data[i];
      var fromCoord = chinaGeoCoordMap[dataItem[0].name];
      var toCoord = [116.4551, 40.2539]; // 目标点经纬度（北京顺义校区）
      if (fromCoord && toCoord) {
        res.push([{
          coord: fromCoord,
          value: dataItem[0].value
        }, {
          coord: toCoord,
        }]);
      }
    }
    return res;
  };
  var series = [];
  [['顺义校区', chinaDatas]].forEach(function (item, i) {
    series.push({
      type: 'lines',
      zlevel: 2,
      effect: {
        show: true,
        period: 4, //箭头指向速度，值越小速度越快
        trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
        symbol: 'arrow', //箭头图标
        symbolSize: 5, //图标大小
      },
      lineStyle: {
        normal: {
          width: 1, //尾迹线条宽度
          opacity: 1, //尾迹线条透明度
          curveness: 0.2 //尾迹线条曲直度
        }
      },
      data: convertData(item[1])
    }, {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      zlevel: 2,
      rippleEffect: { //涟漪特效
        period: 4, //动画时间，值越小速度越快
        brushType: 'stroke', //波纹绘制方式 stroke, fill
        scale: 4 //波纹圆环最大限制，值越大波纹越大
      },
      label: {
        normal: {
          show: true,
          position: 'right', //显示位置
          offset: [5, 0], //偏移设置
          formatter: function (params) {//圆环显示文字
            return params.data.name;
          },
          fontSize: 12
        },
        emphasis: {
          show: true
        }
      },
      symbol: 'circle',
      symbolSize: function (val) {
        return 4 + val[2] * 5; //圆环大小
      },
      itemStyle: {
        normal: {
          show: false,
          color: '#f00'
        }
      },
      data: item[1].map(function (dataItem) {
        return {
          name: dataItem[0].name,
          value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
        };
      }),
    },
      //被攻击点
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: {
          period: 4,
          brushType: 'stroke',
          scale: 4
        },
        label: {
          normal: {
            show: true,
            position: 'right',
            offset: [5, 0],
            color: '#9eca7f', // 目标点文字颜色
            formatter: '{b}',
            textStyle: {
              color: "#9eca7f"
            }
          },
          emphasis: {
            show: true,
            color: "#f60", // 目标点鼠标移入的颜色
          }
        },
        symbol: 'pin',
        symbolSize: 50,
        data: [{
          name: item[0],
          value: chinaGeoCoordMap[item[0]].concat([10]),
        }],
      }
    );
  });

  let option = {
    title: {
      text: '来京路线 From',
      textStyle: {
        color: '#6d767e'
      }
    },
    geo: {
      map: 'china',
      zoom: 1.2,
      label: {
        emphasis: {
          show: false
        }
      },
      roam: true, //是否允许缩放
      itemStyle: {
        normal: {
          // color: 'rgba(51, 69, 89, .5)', //地图背景色
          // color: '#5a6fc0', //地图背景色
          // borderColor: '#516a89', //省市边界线00fcff 516a89
          borderWidth: 1
        },
        emphasis: {
          color: 'rgba(37, 43, 61, .5)' //悬浮背景
        }
      }
    },
    series: series
  }
  myChart.setOption(option)
}
setMap()

// 需求：班级概况
// 页面加载后，直接发送ajax获取数据，渲染到页面上
axios({
  url:'/student/overview'
}).then(({ data: res }) => {
  document.querySelector('.total').innerHTML = res.data.total
  document.querySelector('.avgAge').innerHTML = res.data.avgAge
  document.querySelector('.avgSalary').innerHTML = res.data.avgSalary
  document.querySelector('.proportion').innerHTML = res.data.proportion
}
)

// 需求：柱状图里-点击按钮显示隐藏成绩区域
let btn = document.querySelector('.bar .btn')
let ul = document.querySelector('.bar  ul')
btn.onclick = function () {
  // 判断当前盒子是显示还是隐藏
  if (ul.style.display == 'none') {
    ul.style.display = 'block'
  } else {
    ul.style.display = 'none'
                   }
} 

//需求：获取a标签，绑定点击事件
let as = ul.querySelectorAll('a')
//获取的是伪数组-转真数组 as = Array.form 或者 as = [...as] 
for (let i = 0; i < as.length; i++){
  as[i].onclick = function () {
      console.log(i + 1)
  //发送ajax，获取指定次数的成绩信息
  axios({
    method: 'GET',
    url: '/score/batch',
    params: {
      batch:i+1
    }
  }).then(({ data: res }) => {
    // 判断业务状态码
    if (res.code == 0) {
      setBar(res.data)
    }
  })
   }
}
// 页面一加载，显示第一次成绩
as[0].click()